<template>
  <Tabs type="card" v-model="currentTabName" size="small" @on-click="tabClick">
    <TabPane
      v-for="item in tabNames"
      :key="item.dimensionCode"
      :name="item.dimensionCode"
      :label="item.dimensionName"
    >
      <div v-if="item.dataStructType == '1'">
        <assign-tree-dimension
          :ref="item.dimensionCode"
          :role-id="roleId"
          :tenant-code="tenantCode"
          :dimension-id="item.id"
          :dimension-code="item.dimensionCode"
        />
      </div>
      <div v-else>
        <assign-list-dimension
          :ref="item.dimensionCode"
          :role-id="roleId"
          :tenant-code="tenantCode"
          :dimension-id="item.id"
          :dimension-code="item.dimensionCode"
        />
      </div>
    </TabPane>
  </Tabs>
</template>
<script>
import AssignTreeDimension from "./AssignTreeDimension.vue";
import AssignListDimension from "./AssignListDimension.vue";
import { queryAvailableDimensionList } from "@/api/dimensionApi.js";
import locales from "./locales.js";

export default {
  name: "AssignDimension",
  mixins: [locales],
  components: {
    AssignTreeDimension,
    AssignListDimension
  },
  props: {
    roleId: {
      type: String,
      default: ""
    },
    tenantCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dimensionCode: "",
      tabNames: [],
      currentTabName: "",
      lastTabName: ""
    };
  },
  created: function() {
    this.init();
    this.$emit("SetTitle", this.$t("module.dimension.assignDimension"));
    this.$emit("SetPageWidth", 700);
    this.$emit('SetScroll', 'hidden')
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t("common.close"),
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  methods: {
    init() {
      let param = {
        tenantCode: this.tenantCode
      };
      // $store.dispatch("QueryAvailableDimensionList", param)
      queryAvailableDimensionList(param).then(res => {
        this.tabNames = res.data;
        if (this.tabNames && this.tabNames.length > 0) {
          this.currentTabName = this.tabNames[0].dimensionCode;
          this.lastTabName = this.tabNames[0].dimensionCode;
        }
      });
    },
    save() {
      this.$refs[this.currentTabName][0].save();
      this.$emit("Close");
    },
    tabClick(name) {
      if (this.$refs[this.lastTabName][0].isChange()) {
        new $confirm(this.$t("module.role.saveTip"), this)
          .then(() => {
            this.$refs[this.lastTabName][0].save();
            this.lastTabName = name;
          })
          .catch(() => {
            this.lastTabName = name;
          });
      } else {
        this.lastTabName = name;
      }
    }
  }
};
</script>
